import { useNavigate } from "react-router-dom";
import SearchIcon from '@mui/icons-material/Search';
import "./index.scss";

const Nft = () => {
  // 列表数据
  const listData = [] as any;

  for (let i = 1; i < 30; i++) {
    const ran = Math.floor(Math.random() * 2);
    listData.push({
      id: i,
      name: ran == 0 ? "算力收入" : "(赎回钻石)ZS",
      datetime: "2024-12-01  12:00",
      type: ran,
      power: Math.floor(Math.random() * 100),
    });
  }

  const navigate = useNavigate();
  /**
   * 跳转页面
   * @param url 
   */
  function gotoPage(url: string) {
    navigate(url);
  }

  return (
    <div className="nft-container">
      <div className="main-content-box">
        <div className="nft-banner">
          {/* banner */}
          <img src="./images/ntf_banner.png" />
        </div>
        {/* 按钮 */}
        <div className="btns-box">
          <div className="btn btn-left" onClick={()=>{gotoPage('sell')}}>出售</div>
          <div className="btn btn-right" onClick={()=>{gotoPage('store')}}>仓库</div>
        </div>
        <div className="list-box">
          <div className="hd-box">
            <span className="name">热门集合</span>
            <div className="search-box">
              <input className="input-text" type="text" placeholder='请输入关键字' />
              <div className="btn-min"><SearchIcon /></div>
            </div>
          </div>
          <div className="bd-box">
            <ul>
              {listData.map((item: any) => (
                <li key={item.id} className="item">
                  <div className="item-box" onClick={()=>{gotoPage('detail/'+item.id)}}>
                    <div className="photo-box">
                    <img src="./images/dinosaur2.png" />
                    </div>
                    <div className='cnetre-box'>
                      <div className='name'>金属元素龙</div>
                      <div className='introduce'>金属元素龙简介，介绍介绍介绍介绍介，介绍介绍介绍介绍介介绍介绍介绍介绍介</div>
                    </div>
                    <div className='price-box'>
                      <div className='icon-box'><img src="/images/ton.png" /></div>
                      <div className='price'>2100.00</div>
                    </div>
                  </div>
                </li>
              ))}
            </ul>
          </div>
        </div>
      </div>
    </div>
  );
};
export default Nft;
